<template>
  <div >
    <MainNavBar>
      <template #center-name> 运动员入场 </template>
    </MainNavBar>
    <div class="container">
      <div class="roll"></div>
      <div class="line"></div>
      <div class="cardinfo">参赛运动员证件信息</div>
      <div class="info">
        <!-- <van-field v-model="state.type" disabled :class="{filled:state.type!='请选择证件类型'}">
              <template #right-icon >
                  <img src="http://qnticao.laigl.com/vue/pullingDown1.png" @click="selectType" alt="" >
              </template>
          </van-field> -->
        <!-- <div
          class="id-card-type"
          :class="{ filled: state.type != '请选择证件类型' }"
          @click="selectType"
        > -->
        <div
          class="id-card-type filled"
          @click="selectType"
        >
          <span>{{ state.type }}</span
          ><span
            ><img src="http://qnticao.laigl.com/vue/pullingDown1.png" alt=""
          /></span>
        </div>
        <van-field
          v-model="state.text"
          placeholder="请填写证件号"
          :class="{ filled: state.text != '' }"
          class="ipt id_card"
        />
      </div>
      <div class="match">
        <div class="top">
          <span>选择赛事</span>
          <!-- <span class="note">(可多选)</span> -->
        </div>
        <div class="main">
          <div
            class="item"
            :class="{ filled: state['item' + index] }"
           @click="handleClick(index, item.id, item.name)"
            v-for="(item, index) in matchList"
            :key="item.id"
          >
           <!-- @click="handleClick(index, item.id, item.name)" -->
            <span class="icon">
              <img
                src="http://qnticao.laigl.com/vue/unfill.png"
                alt="未选中"
                v-if="!state['item' + index]"
              />
              <img
                src="http://qnticao.laigl.com/vue/filled.png"
                alt="已选中"
                v-else
              />
            </span>
            <span :class="{ filled: state['item' + index] }">{{
              item.name
            }}</span>
          </div>
        </div>
        <div class="goto-sign" :class="{noClick}" :style="backgroundColor" @click="nextStep">
          下一步
        </div>
      </div>
    </div>
  </div>
  <van-popup v-model:show="isShow" round position="bottom">
    <van-picker
      v-if="isShow"
      title="请选择证件类型"
      :columns="columns"
      @confirm="onConfirm"
      @cancel="onCancel"
      :default-index="state.currentIndex"
    />
  </van-popup>
  <van-popup
    v-model:show="state.showSecurityProtocol"
    round
    :style="{ minHeight: '106.667vw', width: '88vw' }"
    :close-on-click-overlay="false"
    close-icon="close"
    closeable
    close-icon-position="top-right"
    class="popup"
  >
    <div class="wrapper">
      <div class="title">自愿参赛责任及风险告知书</div>
      <div class="tips">
        您好！在填写报名信息前请先仔细阅读参赛健康安全协议。
      </div>
      <div class="content">
        一、参赛选手及其监护人自愿报名参加“杨威杯”全国首届体操通级比赛暨全国亲子体操比赛。<br />
        二、参赛选手及其监护人愿意遵守比赛所有规则规定及采取的措施。<br />
        三、参赛选手及其监护人完全了解自己的身体状况，确认身体健康状况良好，已为参赛做好充分准备。<br />
        参赛运动员须在赛前由组队单位或个人自行购买意外伤害保险。如未购买，在比赛中发生意外伤害，由组队单位和参赛者自负。<br />
        四、参赛选手及其监护人充分了解本次线上比赛可能出现的风险，且已准备必要的防范措施，以对安全负责的态度参赛。<br />
        五、参赛选手及其监护人愿意承担赛事期间发生的意外风险责任。<br/>
        六、参赛选手及其监护人同意大赛组委会以正当方式将上传的参赛作品和照片用于各项业务及项目宣传推广活动。<br/>
        七、参赛选手及其监护人承诺以自己的名义参赛，决不冒名顶替。<br/>
        八、参赛选手及其监护人已认真阅读并全面理解以上内容，报名参赛等于同意上述所有内容，且对上述所有内容予以确认并承担相应的法律责任。<br/>
      </div>
      <div class="mask">
        <div class="bgc"></div>
      </div>
      <div
        class="next"
        :class="{ disableClick: state.timeout !== 0 }"
        @click="next"
      >
        <span>同意并继续</span>
        <span v-if="state.timeout !== 0">({{ state.timeout }}s)</span>
      </div>
      <!-- <div class="next">同意本协议并继续</div> -->
    </div>
  </van-popup>
</template>

<script>
import MainNavBar from "@/components/common/nav/MainNavBar.vue";
import { Toast } from "vant";
import { computed, onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { request } from "@/network/request.js";
export default {
  components: {
    MainNavBar,
  },
  setup() {
    const store = useStore();
    const router = useRouter();
    const isShow = ref(false);
    const state = reactive({
      type: "第二代居民身份证",
      text: "",
      item0: false,
      item1: false,
      currentIndex: 0,
      showSecurityProtocol: false,
      timeout: 5,
      compet_id: [],
      match_name: [],
    });
    const columns = ["第二代居民身份证", "护照", "港澳通行证","出生证"];
    const matchList = ref([]);
    const selectType = () => {
      isShow.value = true;
    };
    const backgroundColor = computed(() => {
      if (
        (state.item0 == false && state.item1 == false) ||
        state.type === "请选择证件类型" ||
        state.text === ""
      )
        return { backgroundColor: "#ced3e0" };
      else return { backgroundColor: "#0054a6" };
    });
    const onConfirm = (value, index) => {
      state.type = value;
      state.currentIndex = index;
      isShow.value = false;
    };
    const onCancel = () => (isShow.value = false);
    const handleClick = (type, id, name) => {
      state["item" + type] = !state["item" + type];
      if (!state.compet_id.includes(id)) {
        state.compet_id.push(id);
        state.match_name.push(name);
      }
      const searchIndex = state.compet_id.indexOf(id);
      if (searchIndex >= 0 && !state["item" + type]) {
        state.compet_id.splice(searchIndex, 1);
        state.match_name.splice(searchIndex, 1);
      }
    };
    const noClick = ref(false);
    const nextStep = () => {
      const rules = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (state.type === "请选择证件类型") {
        Toast("请选择证件类型");
        return;
      } else if (state.text === "") {
        Toast("请填写证件号");
        return;
      } else if (state.type === "第二代居民身份证" && !rules.test(state.text)) {
        Toast("身份证号不合法");
        return;
      } else if (state.compet_id.length === 0) {
        Toast("至少选择一项赛事");
        return;
      }
      noClick.value = true;
      checkSign().then(res=>{
        if(res){
          state.showSecurityProtocol = true;
          sbuTime();
        }
      })
    }
    const checkSign = async ()=>{
       try {
          const res = await request({
          url:"v1/index/checkSign",
          data:{
            compet_id:state.compet_id.join(","),
            id_card:state.text
          }
        })
        if(res.code===200){
          noClick.value = false;
          return true
        }else{
          noClick.value = false;
          Toast(res.msg)
          return false
        }
       } catch (error) {
         noClick.value = false;
         Toast("网络错误")
       }
    }
    const next = () => {
      let match = [];
      for (let i = 0; i < state.compet_id.length; i++) {
        match.push({
          compet_id: state.compet_id[i],
          match_name: state.match_name[i],
        });
      }
      sessionStorage.setItem("match", JSON.stringify(match));
      sessionStorage.setItem(
        "item",
        JSON.stringify({ item0: state.item0, item1: state.item1 })
      );
      store.commit("signUp", {
        id_card: state.text,
        id_type: state.currentIndex,
      });
      router.push({
        name: "fillinfo",
        params: {
          id_card: state.text,
          id_type: state.currentIndex,
        },
      });
    };
    const sbuTime = () => {
      state.timeout = 5;
      let timer = null;
      timer = setInterval(() => {
        if (state.timeout > 0) state.timeout--;
        else {
          clearInterval(timer);
        }
      }, 1000);
    };
    const getMatch = async () => {
      try {
        const res = await request({
          url: "v1/index/getCompetition",
          data: {
            token: sessionStorage.getItem("token"),
          },
        });
        if (res.code === 200) {
          matchList.value = res.data.rows;
          // 2021年6月2日19:52:16
          // matchList.value.forEach(item=>{
          //   state.compet_id.push(item.id);
          //   state.match_name.push(item.name);
          // })
          
        } else {
          Toast(res.msg);
        }
      } catch (error) {
        Toast.fail(error);
      }
    };
    onMounted(() => {
      getMatch();
    });
    return {
      columns,
      onCancel,
      onConfirm,
      isShow,
      state,
      selectType,
      handleClick,
      nextStep,
      next,
      matchList,
      backgroundColor,
      noClick
    };
  },
  beforeRouteEnter(to, from, next) {
    if (from.path == "/fillinfo") {
      next((vm) => {
        vm.state.text = vm.$store.state.signInfo.id_card;

        switch (vm.$store.state.signInfo.id_type) {
          case 0:
            vm.state.type = "第二代居民身份证";
            break;
          case 1:
            vm.state.type = "护照";
            break;
          case 2:
            vm.state.type = "港澳通行证";
            break;
          case 3:
            vm.state.type = "出生证";
            break;
        }
        const item = JSON.parse(sessionStorage.getItem("item"));
        const match = JSON.parse(sessionStorage.getItem("match"));
        vm.state.item0 = item.item0;
        vm.state.item1 = item.item1;
        match.forEach((element) => {
          vm.state.compet_id.push(element.compet_id);
          vm.state.match_name.push(element.match_name);
        });
        // sessionStorage.removeItem("match")
        // sessionStorage.removeItem("item")
      });
    } else {
      next();
    }
  },
};
</script>

<style lang="less" scoped>
.noClick{
  pointer-events: none;
  background-color: #ced3e0!important;
}
.container {
  width: 100vw;
  min-height: calc(100vh - 13.333vw);
  background-image: url("http://qnticao.laigl.com/vue/profile_bg_big.jpg");
  background-repeat: repeat-y;
  background-color: #0054a6;
  background-size: 100% auto;
  position: relative;

  .roll {
    position: absolute;
    left: 11.467vw;
    top: 8.267vw;
    box-sizing: border-box;
    width: 3.2vw;
    height: 3.2vw;
    border-radius: 50%;
    border: 0.533vw solid #ffffff;
  }
  .line {
    position: absolute;
    left: 12.8vw;
    top: 11.467vw;
    width: 0.533vw;
    height: 14.667vw;
    background: #ffffff;
    border-radius: 0.267vw;
  }
  .cardinfo {
    // width: 43.2vw;
    height: 8.533vw;
    font-size: 4.8vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 8.533vw;
    margin-left: 17.6vw;
    padding-top: 5.333vw;
  }
  .info {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 88vw;
    height: 28.533vw;
    background-color: #fff;
    margin: 3.2vw auto 0 auto;
    border-radius: 3.2vw;
    .id-card-type {
      color: #ced3e0;
      height: 12vw;
      line-height: 12vw;
      padding-left: 4.267vw;
      padding-right: 7.467vw;
      font-size: 4.8vw;
      font-weight: 400;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid rgba(132, 145, 177, 0.19);
    }
    .ipt {
      font-size: 4.8vw;
      & input::placeholder {
        // font-weight: 400;
        // color: red;
      }
    }
    img {
      width: 2.8vw;
      height: 3.2vw;
    }
    .filled {
      color: #0a2463;
      font-weight: 600;
    }
  }
  .match {
    margin-top: 9.867vw;
    width: 100vw;
    min-height: calc(100vh - 68.8vw);
    border-top-right-radius: 3.2vw;
    border-top-left-radius: 3.2vw;
    -webkit-appearance: none;
    background-color: #fff;
    overflow: hidden;
    // position: relative;
    // padding-bottom: 5.333vw;
    .top {
      margin: 8vw auto auto 8vw;
      color: rgba(206, 211, 224, 1);
      font-size: 3.733vw;
      display: flex;
      align-items: center;
      span:nth-child(1) {
        font-size: 5.6vw;
        line-height: 5.067vw;
        font-weight: 600;
        color: #000;
      }
      span:nth-child(2) {
        display: block;
        text-align: center;
        width: 18.667vw;
        height: 5.333vw;
        line-height: 5.333vw;
      }
    }
    .main {
      width: 88vw;
      margin: 0 auto;
      margin-top: 5.067vw;
      // min-height: 100%;
      padding-bottom: 25.067vw;
      position: relative;
      .item {
        width: 100%;
        height: 24.533vw;
        border-radius: 3.733vw;
        border: 0.267vw solid #ced3e0;
        font-weight: 500;
        color: #ced3e0;
        line-height: 6.667vw;
        display: flex;
        align-items: center;
        margin-bottom: 5.333vw;
        &.filled {
          border: 0.267vw solid #0a2463;
        }
        .filled {
          color: #0a2463;
        }
        .icon {
          margin: 0 3.733vw 0 5.867vw;
          img {
            width: 6.933vw;
            height: 6.933vw;
            vertical-align: middle;
          }
        }
      }
    }
  }
  .goto-sign {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 16vw;
    color: #fff;
    border-radius: 5.333vw 5.333vw 0vw 0vw;
    text-align: center;
    line-height: 16vw;
    font-size: 5.6vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
  }
}
.picker {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.popup {
  .wrapper {
    padding: 0 8.533vw;
    background-color: #fff;
    position: relative;
    box-sizing: border-box;
    .title {
      text-align: center;
      margin-top: 6.4vw;
      font-size: 5.6vw;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #000000;
      line-height: 7.733vw;
      margin-bottom: 3.2vw;
    }
    .tips {
      font-size: 3.2vw;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #fccf00;
      line-height: 4.533vw;
    }
    .content {
      width: 100%;
      height: 53.333vw;
      overflow-y: scroll;
      font-size: 3.2vw;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      // background-color: #fff;
      line-height: 5.333vw;
      // box-shadow: ;
      position: relative;
      // left: 8.533vw;
      // right: 8.533vw;
      z-index: 1;
    }
    .mask {
      position: absolute;
      bottom: 20.8vw;
      width: 71vw;
      height: 4vw;
      margin: 0 auto;
      overflow: hidden;
      z-index: 0;
      .bgc{
        position: absolute;
        top: 0;
        width: 100%;
        height: 8vw;
      border-radius: 50%;
      // background-color: red;
      overflow: hidden;
      // background-color: rgba(206, 211, 224, 1);
      background: linear-gradient(
        to bottom,
         rgba(206, 211, 224, .2) 0%,
        rgba(255, 255, 255, 0.9) 100%
      );
      }
    }
    .next {
      font-size: 4.8vw;
      line-height: 12.8vw;
      margin-top: 8vw;
      text-align: center;
      width: 70.933vw;
      height: 12.8vw;
      background: #0054a6;
      border-radius: 6.4vw;
      color: #fff;
    }
    .disableClick {
      pointer-events: none;
      margin-top: 8vw;
      line-height: 12.8vw;
      text-align: center;
      width: 70.933vw;
      height: 12.8vw;
      background: #ced3e0;
      border-radius: 6.4vw;
      color: #fff;
    }
  }
}
</style>